<template>
    <div class="driver-kanban">
        <Dispatch-data  v-model="objData"/>
        <div style="padding: 0 16px;background-color: #fff">
            <!--<lar-table-->
            <!--model="user.driver"-->
            <!--canAdd="canAdd"-->
            <!--action="base.table.driver_look"-->
            <!--class="border"-->
            <!--&gt;</lar-table>-->
            <el-table
                    :data="tableData5"
                    :header-cell-style="tableHeaderColor"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="商品名称">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="司机编号"
                        width="140"
                        prop="id">
                </el-table-column>
                <el-table-column
                        label="司机"
                        prop="name">
                    <template slot-scope="props">
                        <div>
                            <span class="props-btn bg4A90E2">在线</span>
                            <span class="props-btn bgFF8D00">激活</span>
                        </div>
                        <div>{{ props.row.name }}</div>
                        <div>{{ props.row.tel }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="APP版本"
                        prop="desc">
                </el-table-column>
                <el-table-column
                        label="当前"
                        prop="desc">
                    <template slot-scope="props">
                        <div>任务: 4</div>
                        <div>运单: 44</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="今日当前得分"
                        prop="desc">
                </el-table-column>
                <el-table-column
                        label="当前扣分"
                        prop="desc">
                </el-table-column>
                <el-table-column
                        label="当前位置"
                        prop="desc">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="100"
                        prop="desc">
                    <template slot-scope="props">
                        <el-button type="warning" size="mini" circle>轨</el-button>
                        <el-button type="primary" size="mini" circle>详</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import DispatchData from './dataShow/DataShow.vue'
    export default {
        components: {
            DispatchData
        },
        data() {
            return {
                objData: [],
                newApi: 'user/driver_count',
                tableData5: [{
                    id: '1',
                    name: '司机一',
                    tel: '15928585007',
                    category: '江浙小吃、小吃零食',
                    desc: '安卓v0.01',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }, {
                    id: '2',
                    name: '司机二',
                    tel: '15928585007',
                    category: '江浙小吃、小吃零食',
                    desc: '安卓v0.01',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }, {
                    id: '3',
                    name: '司机三',
                    tel: '15928585007',
                    category: '江浙小吃、小吃零食',
                    desc: '安卓v0.01',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }]
            }
        },
        computed: {
            dataRefreshDialog() {
                return this.$store.state.num;
            },
        },
        watch: {
            dataRefreshDialog: function(newValue) {
                this.getStatisticsData();
            },
        },
        mounted() {
            this.getStatisticsData();
        },
        methods: {
            tableHeaderColor({ row, column, rowIndex, columnIndex }) {
                if (rowIndex === 0) {
                    return 'background-color: #FAFAFA;color: #000;font-weight: 500;height:54px;font-size:14px'
                }
            },
            getStatisticsData() {  // 获取统计数据
                this.$http.get(this.newApi)
                    .then((response) => {
                        this.objData = response.data.data;
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            }

        }
    }
</script>
<style lang="less">
    .driver-kanban{
        margin: 10px;
        .dispatch-early-warning{
            box-sizing: border-box;
            font-size: 20px;
            padding:6px 0 6px 25px;
            margin-bottom: 2px;
            background-color: #fff;
        }
        .props-btn{
            padding: 1px 4px;
            border-radius: 4px;
            margin-right: 4px;
            color: #fff;
        }
        .bg4A90E2{
            background-color: #4A90E2;
        }
        .bgFF8D00{
            background-color: #FF8D00;
        }
    }
</style>

